<template>
  <div class="app-container">
    <div class="cpn-list">
      <div class="cpn-item" v-for="(item, index) in list" :key="index">
        <span>{{item.clientName}}</span>
      </div>
    </div>

    <el-pagination
      class="row flex-end"
      style="margin-top: 20px"
      v-show="total>0"
      background
      layout="total, sizes, prev, pager, next"
      :page-sizes="[20, 30, 40, 50]"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'elaborately',
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1, // 页码
        limit: 10, // 数量
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    sizeChange(limit) {
      this.listQuery.limit = limit
      this.getList()
    },
    pageChange(page) {
      this.listQuery.page = page
      this.getList()
    },
    // 获取数据
    getList() {
      this.listLoading = true

      this.apiGet('/api/manage/list', {
        page: this.listQuery.page, // 页码
        limit: this.listQuery.limit, // 数量
      }).then(res => {
        this.listLoading = false

        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.totalCount
        } else {
          this.$message.warning(res.message)
        }

      }).catch(() => {
        this.listLoading = false

      })
    },
  }
}
</script>

<style lang="scss" scoped>
// 筛选
.filter-container {
  background: #fff;
  border: 1px solid #DCDFE6;
  padding: 10px;
  .filter-item {
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.cpn-list {
  .cpn-item {
    display: inline-block;
    vertical-align: middle;
    min-width: 120px;
    padding: 0 40px;
    height: 120px;
    margin: 0 20px 20px 0;
    background: linear-gradient(18deg,#3fb4ff 0%, #3fc7ff 100%);
    /*border: 1px solid #999;*/
    border-radius: 10px;
    font-size: 24px;
    text-align: center;
    line-height: 120px;
    color: #fff;
  }
}
</style>
